<template>
    <div style="width: 100%;height: 100%;">
        <div>
            <el-page-header title="新增关卡" content="返回" @back="goback">

            </el-page-header>
        </div>
        <div style="margin-top: 10px;">
            <el-descriptions title="新增关卡" border :column="2" direction="vertical" style="width: 100%;">
                <el-descriptions-item label="关卡名称">
                    <el-input v-model="names"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="难度">
                    <el-rate v-model="lvs" size="large" :max="10" />
                    <br />
                </el-descriptions-item>
                <el-descriptions-item label="标签" :span="2">
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox label="
    JAVA" />
                        <el-checkbox label="NET" />
                        <el-checkbox label="UI" />
                        <el-checkbox label="TEST" />
                        <el-checkbox label="WEB前端" />
                    </el-checkbox-group>
                </el-descriptions-item>
                <el-descriptions-item label="封面">
                    <div style="text-align: center;">
                        <el-upload v-model="photoes" action="#" list-type="picture-card" :auto-upload="false">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            <template #file="{ file }">
                                <div>
                                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                </div>
                            </template>
                        </el-upload>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="描述">
                    <el-input type="textarea" v-model="explains"></el-input>
                </el-descriptions-item>
            </el-descriptions>
            <div style="margin-top: 5px;">
                <div id="zgq" style="display: flex;float: left;"><span>子关卡</span></div>
                <div style="display: flex;float: right;">
                    <el-button plain type="danger" @click="addTab(editableTabsValue)">新增子关卡</el-button>
                </div>
            </div>
            <div class="tabscss">
                <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" :closable="sc" @tab-remove="removeTab">
                    <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                        <el-form :label-position="top" ref="form" label-width="80px">
                            <el-descriptions title="新增任务" direction="vertical" :column="2" border size="large">
                                <el-descriptions-item label="任务试题(最少为10道题)" :span="2">
                                    <div style="width: 100%;">
                                        <div style="display: flex;float: left;">
                                            <el-button type="primary" size="small"
                                                @click="xuanze(item.title)">选择试题</el-button>
                                        </div>
                                        <div style="display: flex;float: right;">
                                            <el-tag type="info" size="large">tips:第二次选择试题时会覆盖掉原有试题！</el-tag>
                                        </div>
                                    </div>
                                    <el-table :data="item.tableData" style="width: 100%;margin-top: 5px;height: 250px;" border>
                                        <el-table-column type="index" label="序号" width="60">
                                        </el-table-column>
                                        <el-table-column prop="content" label="题干" width="180" show-overflow-tooltip>
                                        </el-table-column>
                                        <el-table-column prop="lv" label="难度">
                                        </el-table-column>
                                        <el-table-column label="标签">
                                            <template #default="scope">
                                                <el-tag :key="item.id" v-for="item in scope.row.labels.split(',')">
                                                    {{ item }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="author" label="作者">
                                        </el-table-column>
                                    </el-table>

                                </el-descriptions-item>
                                <el-descriptions-item label="过关方式">
                                    <el-radio-group v-model="item.passlevel">
                                        <el-radio :label="1" @change="dtjs">单体计时</el-radio>
                                        <el-radio :label="2" @change="ztjs">整体计时</el-radio>
                                    </el-radio-group>
                                </el-descriptions-item>
                                <el-descriptions-item label="过关规则">
                                    <el-row>
                                        <el-col :span="12">
                                            <div v-show="mt == true">
                                                <span>每题<el-input-number v-model="item.seconds" :min="3" size="large" />秒钟</span>
                                            </div>
                                            <div v-show="zg == true">
                                                <span>总共<el-input-number v-model="item.seconds" :min="5" size="large" />秒钟</span>
                                            </div>
                                        </el-col>
                                        <el-col :span="12">
                                            <span>允许错<el-input-number v-model="item.failCounts" :min="0" size="large" />题</span>
                                        </el-col>
                                    </el-row>
                                </el-descriptions-item>
                            </el-descriptions>
                            <el-descriptions direction="vertical" :column="1" border>
                                <el-descriptions-item label="操作">
                                    <el-button type="primary" @click="xz">新增</el-button>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
    <chouqushiti v-if="dialogVisibleA" :dialogVisible="dialogVisibleA" @close="changeVi" @datas="zzzzzz"
            :destroy-on-close="true">
        </chouqushiti>
</template>
<script lang="ts">
import router from '@/router'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import { AddLevel } from '../../../api/practice/level/index'
import { GetQuestions, GetLabels, GetQuestionBanks } from '../../../api/question/question'
import chouqushiti from '../../../components/question/chouqushiti.vue';
export default defineComponent({
    components:{
        chouqushiti
    },
    setup() {
        const data = reactive({
            editableTabsValue: 1,//默认选中tabs
            editableTabs: ([
                {
                    title: '任务1',
                    name: 1,
                    passlevel: 1,//过关方式
                    seconds: 5,//每题允许秒数
                    failCounts: 1,//每题允许错数
                    tableData: [],//已选试题
                }
            ]),
            tabIndex: 2,
            sc: true,
            names: '',//关卡名称
            lvs: '',//等级
            checkList: [],//标签
            photoes: '' as any,//封面
            explains: '',//描述
            passlevel: 1,//过关方式
            seconds: 5,//每题允许秒数
            failCounts: 1,//每题允许错数
            qids: [],//题目ID
            tableData: [],//已选试题
            Question: [],//
            dialogVisibleA: false,
            loadtable: true,//选择试题骨架屏
            load: false,//选择试题表格加载
            num: 10 as any,//试题数
            page: 1,//当前页
            limit: 10,//每页数
            total: 0,//总数
            banks: '',
            key: '',
            str: '',
            id: '' as any,
            labels: '' as any,
            mt: false,
            zg: false,
            tableDatass: [],//选择替换试题表格数据
            label:[],
            top:''
        })

        const Route = useRoute();

        const events = {
            //新增
            xz() {
                //拿到考试试题id
                var stids: any = []
                data.editableTabs.forEach((element: any) => {
                    var idss:any=[]
                    element.tableData.forEach((element1:any)=>{
                        idss.push(
                        element1.id
                        )
                    })
                    stids.push({
                        title: element.title,
                        ids: idss
                    }
                    )
                });
                console.log('-=-=-=--=-===',stids)
                var zguanq: any = []
                data.editableTabs.forEach((element: any) => {
                    zguanq.push({
                        type: element.passlevel,
                        second: element.seconds,
                        failCount: element.failCounts,
                        qids: stids.find((d: any) => d.title == element.title) != undefined ? stids.find((d: any) => d.title == element.title).ids : []
                    })
                })
                ElMessageBox.confirm(
                    '你确定要新增吗?',
                    '新增关卡',
                    {
                        confirmButtonText: '是',
                        cancelButtonText: '否',
                        type: 'warning',
                    }
                ).then(() => {
                    AddLevel({
                        name: data.names,//关卡名称
                        lv: data.lvs,
                        explain: data.explains,
                        photo: data.photoes,
                        labels: data.checkList,
                        details: zguanq
                    }).then((res: any) => {
                        if (res.result == 0) {
                            ElMessage({
                                type: 'success',
                                message: '添加成功',
                            })
                            router.push('/practice/level')
                        } else {
                            ElMessage({
                                type: 'error',
                                message: '添加失败',
                            })
                        }
                    })
                }).catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '操作取消',
                    })
                })

            },
            goback() {
                router.go(-1)
            },
            //新增一个页面
            addTab(editableTabsValue: number) {
                if (data.editableTabs.length < 10) {
                    const newTabName = data.tabIndex++
                    console.log('应该选第', newTabName, '个界面')
                    console.log("有", data.editableTabs.length + 1, "界面")
                    var lengs = data.editableTabs.length + 1
                    data.editableTabs.push({
                        title: '任务' + lengs,//名称
                        name: newTabName,//选择第几个
                        passlevel: 1,//过关方式
                        seconds: 5,//每题允许秒数
                        failCounts: 1,//每题允许错数
                        tableData: [],//已选试题
                    })
                    data.editableTabsValue = newTabName//新增选中的页面
                } else {
                    ElNotification({
                        title: '当前最多允许10个子任务',
                        type: 'error',
                    })
                }
            },
            //删除tabs页面
            removeTab(targetName: any) {
                if (data.editableTabs.length > 1) {
                    const tabs = data.editableTabs
                    let activeName = data.editableTabsValue
                    if (activeName === targetName) {
                        console.log("删除的页面activeName", activeName)
                        console.log("删除的页面targetName", targetName)
                        tabs.forEach((tab: any, index: any) => {
                            if (tab.name === targetName) {
                                console.log("tab.name", tab.name)
                                console.log("targetName", targetName)
                                const nextTab = tabs[index + 1] || tabs[index - 1]
                                if (nextTab) {
                                    console.log("nextTab", nextTab)
                                    activeName = nextTab.name
                                    console.log("选中", activeName, "第个页面")
                                }
                            }
                        })
                    }

                    data.editableTabsValue = activeName
                    data.editableTabs = tabs.filter((tab: any) => tab.name !== targetName)
                } else {
                    ElNotification({
                        title: '你无法移除最后一个子任务',
                        type: 'error',
                    })
                }
            },
            //查询题目
            bind() {
                GetQuestions({
                    page: data.page,
                    limit: data.limit,
                    key: data.key,
                    banks: data.Question.join(","),
                    labels: data.label.join(",")
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.tableDatass = res.data.data
                        data.total = res.data.total
                    }
                })
            },
            //单题计时
            dtjs() {
                data.mt = true
                data.zg = false
            },
            //整体计时
            ztjs() {
                data.zg = true
                data.mt = false
            },
            zzzzzz(val: any) {
                data.editableTabs.forEach((item: any) => {
                    console.log("///////////", item)
                    //当item.title==缓存title--将值传给item.tableData--再传入shujudata.editableTabs
                    if (item.title == sessionStorage.getItem("title")) {
                        item.tableData = val;
                    }
                });
                console.log("--------shujudata.tableData--------", data.editableTabs)
            },
            //对话框
            xuanze(title: any) {
                console.log("选择的对话框title", title)
                sessionStorage.setItem("title", title)//缓存title
                data.dialogVisibleA = true
            },
            changeVi() {
                data.dialogVisibleA = false//关闭销毁dialog
            },
        }
        onMounted(() => {
            data.mt = true
            events.bind();
        })

        return {
            ...toRefs(data),
            ...events
        }
    },
})
</script>
<style>
#zgq {
    background-color: #409eff;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-weight: 700;
    padding-left: 15px;
    width: 110px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    margin-left: -10px;
}

.tabscss {
    margin-top: 40px;
    padding: 10px;
    box-shadow: 0 2px 12px #0000001a;
    border: 1px paleturquoise solid;
    border-radius: 5px;
}
</style>
